<template>
  <el-dialog v-model="dialogVisible" width="100%" style="height: 3.8rem;" :before-close="HandleClose" class="dialog-wrap customWidth">
    <div style="display: flex;justify-content: center;align-items: center;height: .3rem">
      <div class="ksss">使用帮助</div>
    </div>
    <div style="height: calc(100% - .7rem); margin-top: .01rem; margin-bottom: 0.1rem;">
      <el-tabs tab-position="left" style="height: 100%;overflow: auto" class="demo-tabs">
        <el-tab-pane v-for="item in menuList" >
          <template #label style="display: flex;align-items: center;">
              <span :class="item.description"></span>
              <span style="display: block;margin-left: 5px;">{{ item.text }}</span>
          </template>
<!--          <template #label>-->
<!--            <span class="custom-tabs-label">-->
<!--              <el-icon :class="item.description"></el-icon>-->
<!--              <el-icon><calendar /></el-icon>-->
<!--              <span>{{ item.text }}</span>-->
<!--            </span>-->
<!--          </template>-->
          <div style="width: 100%">
            <div v-for="child in helpList[item.text]">
              <div class="title-box">
                <span class="tips"></span>
                <span>{{child.title}}</span>
              </div>
              <div class="describle">{{child.describle}}</div>
            </div>
          </div>
        </el-tab-pane>
<!--        <el-tab-pane label="Config">Config</el-tab-pane>-->
<!--        <el-tab-pane label="Role">Role</el-tab-pane>-->
<!--        <el-tab-pane label="Task">Task</el-tab-pane>-->
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script>
import help from '../../common/help'

export default {
  data() {
    return {
      dialogVisible: false,
      menuList:[],
      helpList: help.helpList
    }
  },
  // 生命周期
  mounted() {
    const menus = JSON.parse(localStorage.getItem('menus'))
    console.log("menus===1111==>",menus)
    this.menuList=menus
  },
  methods: {
    HandleClose(done) {
      this.visible = false; // 关闭
      this.dialogVisible = false; // 关闭
    },
    handleDialog() {
      this.dialogVisible = true;
    },
  },
}
</script>

<style scoped>
  .ksss{
    color: aliceblue;font-size: 16px;
    width: 300px;
    height: 40px;
    background: url("@/assets/images/title_bg.png") no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title-box{
    height: 0.2rem;
    width: 100%;
    display: flex;
    align-items: center;
    color: #333;
    font-weight: bold;
    background: #e8ebf9;
    padding: 0 .05rem;
    border-radius: .02rem;
  }
  .tips{
    color: #5C7CFF;
    border: 0.02rem solid;
    border-radius: 100%;
    margin-right: .02rem;
  }
  .describle{
    padding: .1rem .05rem;
    color: #666666;
  }
  .custom-tabs-label{
    display: flex;
    align-items: center;
  }
</style>